<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '退款申请',
    backgroundColor: '#f5f5f5',
  },
}
</route>

<template>
  <view class="refund-container">
    <!-- 订单信息 -->
    <view class="order-card">
      <view class="order-header">
        <text class="order-id">订单号：{{ orderInfo.orderNo }}</text>
        <text class="order-status">{{ OrderStatusMap[orderInfo.orderStatus] }}</text>
      </view>
      <vie class="goods-list">
        <view
          class="goods-preview"
          v-for="item in orderInfo.orderItemList.slice(0, 3)"
          :key="item.id.toString"
        >
          <image :src="item.thumbImg" class="goods-thumb" />
          <view class="goods-info">
            <view class="goods-name">{{ item.skuName }}</view>
            <view class="goods-num">*{{ item.skuNum }}</view>
          </view>
        </view>
      </vie>
    </view>

    <!-- 退款类型 -->
    <view class="form-section">
      <view class="section-title">退款类型</view>
      <wd-radio-group v-model="formData.refundType" checked-color="#fa4350" :disabled="!showType">
        <!-- <view class="radio-item">
         
        </view> -->
        <wd-radio :value="OrderStatusEnum.REFUNDING">未发货退款</wd-radio>
        <wd-radio :value="OrderStatusEnum.RETURN_REFUND" v-if="showReturnType">
          已发货退货退款
        </wd-radio>
      </wd-radio-group>
    </view>

    <!-- 退款原因 -->
    <view class="form-section">
      <wd-select-picker
        v-model="formData.reason"
        type="radio"
        placeholder="请选择退款原因"
        :columns="refundReasons"
      />
    </view>

    <!-- 退款说明 -->
    <view class="form-section">
      <wd-textarea
        v-model="formData.description"
        placeholder="请详细描述退款原因（最多200字）"
        :maxlength="200"
        show-word-limit
      />
    </view>

    <!-- 凭证上传 -->
    <!-- <view class="form-section">
      <view class="section-title">上传凭证（最多9张）</view>
      <wd-upload
        v-model="formData.evidencePhotos"
        :limit="9"
        upload-text="上传图片"
        preview-size="150rpx"
      />
    </view> -->

    <!-- 退货物流
    <view class="form-section" v-if="formData.refundType === 2">
      <wd-input v-model="formData.logisticsCompany" placeholder="请输入物流公司名称" />

      <wd-input v-model="formData.trackingNumber" placeholder="请输入物流运单号" />
    </view> -->

    <!-- 提交按钮 -->
    <view class="submit-footer">
      <wd-button
        type="primary"
        class="custom-shadow"
        :disabled="!showType"
        block
        :loading="isSubmitting"
        @click="handleSubmit"
      >
        提交申请
      </wd-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

import { OrderApi, OrderStatusMap } from '@/service/order/order'
import { OrderStatusEnum } from '@/service/order/orderEnum.d'
import type { OrderInfoVo } from '@/service/order/order.d'

const orderId = ref('')
const orderInfo = ref<OrderInfoVo>({} as OrderInfoVo)
const isSubmitting = ref(false)

// 表单数据
const formData = ref({
  refundType: OrderStatusEnum.REFUNDING, //
  reason: '',
  description: '',
  evidencePhotos: [] as string[],
  logisticsCompany: '',
  trackingNumber: '',
})

// 退款原因选项
const refundReasons = [
  { label: '不想要了', value: '不想要了' },
  { label: '商品信息不符', value: '商品信息不符' },
  { label: '收到商品破损', value: '收到商品破损' },
  { label: '未按约定时间发货', value: '未按约定时间发货' },
  { label: '其他原因', value: '其他原因' },
]

// 显示退货类型条件
const showReturnType = computed(() => {
  return (
    orderInfo.value.orderStatus === OrderStatusEnum.ALREADY_DELIVER ||
    orderInfo.value.orderStatus === OrderStatusEnum.COMPLETED ||
    orderInfo.value.orderStatus === OrderStatusEnum.WAIT_COMMENT
  )
})
// 显示退货类型条件
const showType = computed(() => {
  return (
    orderInfo.value.orderStatus === OrderStatusEnum.WAIT_DELIVER ||
    orderInfo.value.orderStatus === OrderStatusEnum.ALREADY_DELIVER ||
    orderInfo.value.orderStatus === OrderStatusEnum.COMPLETED ||
    orderInfo.value.orderStatus === OrderStatusEnum.WAIT_COMMENT
  )
})

// 初始化加载
onLoad(async (options) => {
  orderId.value = options.orderId || ''
  if (orderId.value) {
    const { data } = await OrderApi.getDetail(Number(orderId.value))
    orderInfo.value = data
  }
})

// 提交申请
const handleSubmit = async () => {
  // 校验 refundType
  if (!formData.value.refundType) {
    uni.showToast({ title: '请选择退款类型', icon: 'none' })
    return
  }

  // 校验 reason
  if (!formData.value.reason) {
    uni.showToast({ title: '请选择退款原因', icon: 'none' })
    return
  }
  try {
    isSubmitting.value = true
    const { code, data } = await OrderApi.updateOrderStatus({
      orderId: Number(orderId.value),
      status: formData.value.refundType,
      reasonForRefund: formData.value.reason,
      refundDescription: formData.value.description,
    })
    if (code === 200 && data) {
      uni.showToast({ title: '申请提交成功' })
      setTimeout(() => {
        uni.navigateBack()
      }, 1000)
    }
  } finally {
    isSubmitting.value = false
  }
}
</script>

<style lang="scss" scoped>
.refund-container {
  padding: 30rpx;
  padding-bottom: 120rpx;
  background: #f5f5f5;
}

.order-card {
  padding: 30rpx;
  margin-bottom: 30rpx;
  background: #fff;
  border-radius: 16rpx;

  .order-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30rpx;

    .order-id {
      font-size: 28rpx;
      color: #666;
    }

    .order-status {
      font-size: 26rpx;
      color: #e4393c;
    }
  }

  .goods-preview {
    display: flex;
    gap: 20rpx;

    .goods-thumb {
      width: 120rpx;
      height: 120rpx;
      border: 1rpx solid #eee;
      border-radius: 8rpx;
    }
    .goods-info {
      display: flex;
      flex-direction: column;
      .goods-name {
        font-size: 28rpx;
        color: #666;
      }
      .goods-num {
        font-size: 20rpx;
        color: #999;
      }
    }
  }
}

.form-section {
  padding: 30rpx;
  margin-bottom: 30rpx;
  background: #fff;
  border-radius: 16rpx;

  .section-title {
    margin-bottom: 30rpx;
    font-size: 32rpx;
    color: #333;
  }

  .radio-item {
    display: flex;
    gap: 60rpx;
  }
}

.submit-footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 20rpx 30rpx;
  background: #fff;
  box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
  :deep() {
    .custom-shadow {
      background-color: $uni-bg-themes;
    }
  }
}
</style>
